<template>
	<view>
		<u-empty :show="!lists.length" mode="list"></u-empty>
		<u-list @scrolltolower="onScrolltolower" @scroll="onScroll" :scrollTop="scrollTopList"
			:scrollWithAnimation="true" :enableBackToTop="true" :pagingEnabled="true" v-if="lists.length">
			<u-list-item v-for="(game, index) in lists" :key="`game${index}`" :anchor="`game${index}`">
				<list-game-item :game="game" @openGame="openGame" />
			</u-list-item>
		</u-list>
		<!-- <u-loadmore :status="loading" /> -->
		<u-back-top :scroll-top="scrollTop" mode="square" top="100" @click="manualToTop"></u-back-top>
	</view>
</template>

<script>
	import ListGameItem from "@/components/list-game-item.vue"
	export default {
		props: {
			games: {
				type: Array,
				default: () => {
					return [];
				}
			},
		},
		components: {
			ListGameItem,
		},
		data() {
			return {
				lists: [],
				page: 1,
				pageSize: 8,
				loading: "nomore",
				scrollTop: 0,
				scrollTopList: 0,
			}
		},
		watch: {
			games () {
				this.loadmore();
			}
		},
		methods: {
			onScrolltolower() {
				this.loadmore();
			},
			loadmore() {
				// console.log("lists games", this.lists.length, this.games.length)
				if (this.lists.length === this.games.length) return;
			
				let start = (this.page - 1) * this.pageSize;
				let gameCount = this.games.length;
				// console.log("start gameCount", start, gameCount)
				if (start >= gameCount) return;
			
				let end = start + this.pageSize;
				if (end > gameCount) end = gameCount;
			
				// console.log("start end", start, end - 1)
				for (let i = start; i < end; i++) {
					this.lists.push(this.games[i]);
				}
				this.page++;
			},
			onScroll(e) {
				this.scrollTop = e;
			},
			manualToTop() {
				this.scrollTopList = 1;
				this.$nextTick(() => {
					this.scrollTopList = 0;
				})
			},
			openGame(game) {
				uni.setStorageSync('curGame', game);
			
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: "game",
				});
				// #endif
				// #ifndef APP-PLUS
				location.href = game.url;
				// #endif
			},
		},
		// created() {
		// 	console.log("this.lists.length", this.lists.length)
		// 	if (!this.lists.length) this.loadmore();
		// },
	// 	onShow() {
	// 		console.log("onShow")
	// 	}
	}
</script>

<style>
</style>